<script>
  import sheep from '@/sheep';
  import FamilyInfo from '@/pages/pc/components/familyInfo.vue';

  export default {
    name: 'familyPage',
    components: { FamilyInfo },
    data() {
      return {
        selectFamilyIndex: 0,
        familyName: '',
      };
    },
    computed: {
      familyList() {
        return sheep.$store('family').list;
      },
      is_login() {
        return sheep.$store('user').isLogin;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      // 获取家庭信息
      async getFamilyInfo() {
        const { data } = await sheep.$api.family.getFamilyInfo({});
      },
      // 选择家庭
      async selectFamily(index) {
        this.selectFamilyIndex = index;
      },
      // 新建家庭
      async addFamily() {
        this.$refs.familyMemberPopUp.openPopup({
          title: '',
          maskClick: false,
          confirm: async () => {
            if (!this.familyName) {
              uni.showToast({
                title: '请输入家庭名称',
                icon: 'none',
              });
              return;
            }
            const { code } = await sheep.$api.family.createFamily({
              name: this.familyName,
            });
            if (code == 1) {
              this.$refs.familyMemberPopUp.closePopup();
              sheep.$store('family').getList()
              uni.showToast({
                title: '创建成功',
                icon: 'none',
              });
            }
          },
        });
      },
      nameBoxClose(){
        this.$refs.familyMemberPopUp.closePopup();
      }
    },
  };
</script>

<template>
  <uni-row style="width: 100%;height: 99.1%;" class="flex flex-column align-center">
    <view style="width: 100%;border-radius: 8px;"
          class="bg_FFFFFF"
    >
      <view
        class="flex align-center justify-between "
      >
        <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
              class="flex align-center justify-between">
          <view class="flex align-end" style="margin-left: 20px;">
            <view class="flex align-center">
              <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
              <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                家庭列表
              </view>
            </view>
            <view style="font-size: 20px;color: #5C5C5C;margin-left: 10px;white-space: nowrap" class="fw_500">
              再小的家庭 也可以有传承
            </view>
          </view>
        </view>
        <view
          style="width: 85px;height: 30px;background: #FFFFFF;border-radius: 15px 15px 15px 15px;border: 1px solid #BCBCBC;padding: 4px 10px;margin-right: 20px;cursor:pointer;"
          class="flex align-center justify-center"
          @click.stop="addFamily"
        >
          <image :src="`${IMG_URL}/index/pc_familyCulture_add.png`" style="width: 15px;height: 15px;"></image>
          <view style="margin-left: 5px;font-size: 11px;font-weight: 500;color: #363636;">新建家庭</view>
        </view>
      </view>
      <view style="width: 100%;overflow: hidden" class="flex align-center justify-cente">
        <view scroll-x="true"
              style="width: 98%;white-space: nowrap;padding: 10px 10px;overflow-x: scroll;"
        >
          <view v-for="(item,index) in familyList"
                :key="index"
                style="width: 478px;height: 142px;border-radius: 8px;border: 2px solid #EDEDED;display: inline-block;margin-right: 10px;cursor:pointer;"
                :style="{
                  background: index === selectFamilyIndex ? '#FFEAEA' : '#FFFFFF',
                  border: index === selectFamilyIndex ? '2px solid #FF440A' : '2px solid #EDEDED',
                }"
                @click.stop="selectFamily(index)"
          >
            <view class="flex align-center;" style="height: 100%;">
              <view style="border-radius: 12px;overflow: hidden;margin:auto 10px;">
                <image v-if="!item.cover_lsit || item.cover_lsit.length <= 0 || !is_login"
                       :src="`${nc_image}/assets/UNIAPP/001.png`"
                       style="width: 184px;height: 125px;"
                ></image>
                <swiper v-else
                        style="width: 184px;height: 125px;"
                        autoplay
                        circular
                        indicator-color="rgba(255,255,255,0.1)"
                        indicator-active-color="#fff"
                        :interval="3000"
                        :duration="500"
                >
                  <block v-for="(item,index) in item.cover_lsit" :key="index">
                    <swiper-item>
                      <!--                    <navigator :url="item.url">-->
                      <image :src="item" style="width: 184px;height: 125px;" mode="aspectFill" />
                      <!--                    </navigator>-->
                    </swiper-item>
                  </block>
                </swiper>
              </view>
              <view class="flex align-start flex-column justify-center">
                <view style="font-size: 24px;color: #6C6C6C;font-weight: bold;">
                  {{ item.name }}
                </view>
                <view style="font-size: 18px;color: #6C6C6C;font-weight: 400;margin-top: 10px;">
                  家庭号: {{ item.family_id }}
                </view>
                <view style="font-size: 18px;color: #6C6C6C;font-weight: 400;margin-top: 10px;"
                      class="flex align-center">
                  <view>发起人: {{ item.create_user_name }}</view>
                  <view style="margin-left: 10px;">人数: {{ item.member_count }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%;flex: 1;position: relative">
      <familyInfo :id="familyList[selectFamilyIndex].id"></familyInfo>
    </view>

    <s-first-popup ref="familyMemberPopUp" @closePopup="nameBoxClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              新建家庭
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <input type="text" v-model="familyName"
                   placeholder="请输入家庭名称"
                   placeholder-class="familyMemberPopUp_editInfo_placeholder"
            >
          </view>
        </view>
      </template>
    </s-first-popup>
  </uni-row>
</template>

<style scoped lang="scss">

  .familyMemberPopUp_icon {
    width: 147rpx;
    height: 147rpx;
    position: absolute;
    top: 0;
    right: 0;
  }

  .familyMemberPopUp_title {
    width: 454rpx;

    .familyMemberPopUp_title_name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #292929;

    }

    .familyMemberPopUp_title_detail {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #9F9F9F;
    }
  }

  .familyMemberPopUp_editInfo {
    padding: 10px 15px;
    background: #F5F5F5;
    border-radius: 20px;
    text-align: center;
  }
</style>